{extend name="public/base" /}
{block name="title"}<title>抽奖</title>{/block}

{block name="pjax_container"}
<?php
    $titleTypeName = '抽奖';
?>
<style>
.luckdraw-top{
    margin-top: 100px;
   min-height: 300px;
    display: flex;
    padding: 10px;
    flex-direction: column;

    border: 1px solid #ccc;
    letter-spacing: 1px;
    border-radius: 10px;
    width: 49.5%;
    margin-left: 1%;
    box-shadow: 0 0 5px #ccc;
}
.luckdraw-top:nth-child(1){
        margin-left: 0;
}

.luckdraw-top>div{
 
  display: flex;
   justify-content:flex-start;
    align-items: flex-start;
      margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
       position: relative;
}

.luckdraw-top>div>div{
    height: 30px;
    line-height: 30px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
    flex: 1;
    font-size: 16px;
    color: #666;
  
  
}
.luckdraw-top>div>h3{
    height: 30px;
    margin-top: 0;
    line-height: 30px;
    font-size: 18px;
    color: #555;
    
}
 .luckdraw-top input[type="number"]{
    width: 50px;
    text-align: center;
    margin: 0 10px;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid #ccc;
} 
.bthDraw{
    width: 40%;
    position: absolute;
    bottom: 20px;
    left: 50%;
    background-color: #0081ff;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
    height: 40px;
    border-radius: 10px;
    border: none;
    transform: translateX(-50%);

}

.content-header>.breadcrumb>li{
    color: #999;
}
.content-header>.breadcrumb>.active{
    color: #666;
}
.content-header{
    height: 51px;
 
}
.btn-primary{
      background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 5px 10px; 
}
.box-primary{
  border-top-color: #ecf0f5 !important;
  border-top-width: 16px;
  
}
.btn-primary:hover{
     background-color: #1890FF;
    color: #fff;
    border: none;
    opacity: .9;
    border-radius: 6px !important; 
}
.delete-one{
    background-color: ff4141 !important;
    margin-left: 15px;
    border-radius: 6px;
}
.sreachs{
       background-color: #1890FF;
    color: #fff;
    border: none;
    border-radius: 6px !important;
    margin-left: 15px;
    padding: 7px 15px; 
}
.container>h3{
    position: absolute;
    left: 50%;
    top: 120px;
    font-weight: bold;
    letter-spacing: 2px;
    transform: translateX(-50%);
    text-shadow: 0 0 5px #0081ff;
}
</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>奖票管理</li>
        <li class="active">{$titleTypeName}</li>
    </ol>
</section>
<section class="container">
    <h3>本次共参与奖票<span>{$relation_users_num}</span>张</h3>
    <div class="row">

        {foreach name="$activity['info']" item="vo" key="ko"}
        <div class="col-sm-6 luckdraw-top">
            <div><h3>第 {$ko+1} 轮抽奖</h3>
                <div>共 {$vo.sum} 个奖项</div>
            </div>
            <table class="table table-hover">
                <!--<thead>
                <tr>
                    <th scope="col">姓名</th>
                    <th scope="col">获奖原因</th>
                    <th scope="col">奖励</th>
                    <th scope="col">评分</th>
                    <th scope="col">时间</th>
                </tr>
                </thead>-->
                <tbody>

                {foreach name="$activity_log" item="vo2"}

                {if condition="$vo2['number'] == $ko+1"}
                <tr>
                    <th scope="row">{$user_list[$vo2['user_id']]}</th>
                    <td>{$vo2.content}</td>
                    <!--<td>{:date('Y-m-d', $vo2['create_time'])}</td>-->
                </tr>
                {/if}

                {/foreach}

                </tbody>
            </table>
            {if condition="$vo['status'] == 0 && $relation_users_num > $vo.sum"}
            <!-- <button href="{:url('ticket/activity_start', ['id'=>$activity['id'], 'lun'=>$ko+1])}"><button class="bthDraw">开始抽奖</button></a> -->
            <button class="bthDraw popups_star" lun="{$ko+1}" data_id="{$activity['id']}" >开始抽奖</button>
            {/if}
        </div>
        {/foreach}

    </div>
    <div class="row" style="margin-top: 150px;box-shadow: 0 0 5px #ccc;">
        <div class="col-md-12">
            <table class="table table-hover">
                <!--<thead>
                    <tr>
            
                        <th scope="col">姓名</th>
                        <th scope="col">获奖原因</th>
                        <th scope="col">奖励</th>
                        <th scope="col">评分</th>
                        <th scope="col">时间</th>
                    </tr>
                </thead>-->
                <tbody>

                {foreach name="$activity_log" item="vo2"}
                <tr>
                    <th scope="row">{$user_list[$vo2['user_id']]}</th>
                    <td>{$vo2.content}</td>
                    <!--<td>{:date('Y-m-d', $vo2['create_time'])}</td>-->
                </tr>
                {/foreach}

            
                </tbody>
            </table>
        </div>
   
    </div>
</section>
<script type="application/javascript">
$(document).ready(function () {
    /*ajax页面加载icheck，有该控件的页面才需要*/
    $(".select2").select2({language:"zh-CN"});
})
</script>

<!-- 抽奖功能 an -->
<style>
    .draw_info{
        position: absolute;
        top: 400px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
    .draw_name{
        background: #fff;
        width: 300px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border-radius: 5px;
        font-size: 32px;
    }
    .draw_start{
        background: #ff7f00;
        color: #fff;
        width: 150px;
        height: 50px;
        margin: 30px auto;
        line-height: 50px;
        text-align: center;
        border-radius: 25px;
        font-size: 28px;
        cursor: pointer;
    }
</style>
<!-- Modal 弹出层重写 人员单选  -->
<div class="modal fade" id="Luck_draw" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 500px;margin: 0 auto;">
            <img alt="" style="width: 500px" src="__STATIC__/web/Luck_draw.jpg">
            <img class="Luck_draw_close" src="__STATIC__/web/draw_close.png" alt="" style="position: absolute;top:20px;right:20px;width:40px;height:40px;cursor: pointer;">
            <div class="draw_info">
                <div class="draw_name"></div>
                <div class="draw_start" id="btn_on_off" onclick="start()">开始</div>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript">
    var lun_id;//轮次id
    var activity_id;//活动id
    $(".popups_star").click(function (e) { 
        // e.preventDefault();
        lun_id = $(this).attr("lun");
        activity_id = $(this).attr("data_id");
        $('#Luck_draw').modal('show');
        draw_star_array();
    });
    $(".Luck_draw_close").click(function (e) { 
        // e.preventDefault();
         $('#Luck_draw').modal('hide');
    });
    $('#Luck_draw').on('hidden.bs.modal', function () {
        //执行一些动作...重置弹窗
        location.reload();
    });
    // 抽奖功能
    var people_array;//人员信息数组
    var id_array;//人员id数组
    var draw_sum;//抽奖总数
    var draw_used_sum; //已经抽取数量
    var name_input = $('.draw_name');//名字框
    var runing = true;//开始停止状态
    var check_id;//选中人员id
    var array_num;//选中id为数组中第几个
    var t;
    //开始停止
    function start() {
        if (draw_sum - draw_used_sum > 0) {
            if (runing) {
                $('#btn_on_off').removeClass('start').addClass('stop');
                $('#btn_on_off').html('停止');
                startNum();
                runing = false;
            } else {
                $('#btn_on_off').removeClass('stop').addClass('start');
                $('#btn_on_off').html('开始');
                stop();
                draw_check();//抽奖完成
                runing = true;
            }
        } else {
            layui.layer.msg("抽奖人数已满");
        }
    }
    //循环参加名单
    function startNum() {
        array_num = Math.floor(Math.random() * id_array.length);
        check_id = id_array[array_num];
        name_input.html(people_array[check_id].name);
        t = setTimeout(startNum, 0);
    }
    //停止跳动
    function stop() {
        clearInterval(t);
        t = 0;
    }
    //点击完成时加载抽奖数据
    function draw_check() {
        id_array.splice($.inArray(id_array[array_num], id_array), 1);
        
        $.ajax({
            type: 'get',
            url: "{:url('end_draw')}",
            data: {'id' : check_id,'lun' : lun_id,'activity_id' : activity_id},
            dataType:"json",
            success: function (data) {
                console.log(data);
                if (data.code == 0) {
                    layui.layer.msg("已成功抽中"+name_input.html()+"");
                    draw_sum = data.data.sum;
                    draw_used_sum = data.data.use_sum;
                } else {
                    layui.layer.msg(data.msg);
                }
            } 
        })
    }
    //点击开始时加载抽奖数据
    function draw_star_array(){
        
         $.ajax({
            type: 'get',
            url: "{:url('start_draw')}",
            data: {'id' : activity_id,'lun' : lun_id},
            dataType:"json",
            async: false,
            success: function (data) {
                // console.log(data);
                if (data.code == 0) {
                    id_array = data.data.ids;
                    people_array = data.data.list;
                    draw_sum = data.data.sum;
                    draw_used_sum = data.data.use_sum;
                } else {
                    layui.layer.msg(data.msg);
                }
            } 
        });
    }
</script>
<!-- 抽奖功能 an -->

{/block}
